<template>
	<view class="note">
		<!-- <view class="onte-section">
			<view class="note-item u-flex" v-for="(item, index) in groupList" :key="index"
				@click="toRoom(item.Gid)">
				<view class="note-item_avatar">
					<u-image width="72rpx" height="72rpx" border-radius="72rpx"
						:src="item.GroupAvatar != '' ? item.GroupAvatar : '/static/images/avatar.jpg'"></u-image>
				</view>
				<view class="note-item_content u-flex-1 u-border-bottom">
					<view class="note-item_content--name">{{item.GroupName}}</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" margin-bottom="45" margin-top="45"
			color="#C1C0C0" /> -->
			
			
		<scroll-view scroll-y style="height:90vh" refresher-enabled="true" :refresher-triggered="isRefreshed" @refresherrefresh="handleRefresh">
			<movable-area v-if="groupList && JSON.parse(JSON.stringify(groupList)).length > 0" v-for="(item, index) in groupList" :key="index"
				class="t-conversation-item-container">
				<movable-view class="t-conversation-item" direction="horizontal" @change="handleTouchMove" @click="toRoom(item.Gid, item.GroupName)" damping="100"
					:x="xScale">
					<view class="avatar-box">
						<image class="t-conversation-item-avatar" v-if="item.GroupAvatar" :src="item.GroupAvatar" @error="handleImageError(index)"></image>
						<image class="t-conversation-item-avatar" v-else src="/static/static/assets/gruopavatar.svg"></image>
					</view>
					<view class="t-conversation-item-content">
						<label class="tui-conversation-item-name">{{item.GroupName}}</label>
					</view>
				</movable-view>
			</movable-area>
		</scroll-view>	
		
		<view class="empty-wrap" v-if="JSON.parse(JSON.stringify(groupList)).length == 0">
			<u-empty :text="$t('chat.empty_txt')" mode="list"></u-empty>
		</view>
			
		<view class="note-footer">
			<u-button type="primary" @click="$goPage('/note/group/create', {pid: pid,title: $t('chat.chat_group_new')})">{{$t('chat.chat_group_new')}}</u-button>
		</view>
	</view>
</template>

<script>
	import pageMixin from '@/utils/pageMixin';
	import timStore from "../../TUIKit/TUICore/store";
	export default {
		mixins: [pageMixin],
		data() {
			return {
				xScale: 0,
				groupList: [],
				status: 'nomore',
				iconType: 'flower',
				loadText: {
					loadmore: this.$t('mine.pull_up'),
					loading: this.$t('mine.loading'),
					nomore: this.$t('mine.note_no_more')
				},
				isRefreshed: false,
				vuex_user:{},
			}
		},
		props: {
			pid: {
				type: String || Number,
				default: 0
			}
		},
		mounted() {
		  this.vuex_user = this.$store.state.vuex_user
		  this.getGroupList();
		},
		onLoad() {
		
		},
		onShow() {
			this.getGroupList();
		},
		components: {},
		computed: {
			i18n() {
				return this.$t('chat')
			}
		},
		methods: {
			getGroupList() {
				this.$http.get('/mgr/user/group/list/data', {
					pid: this.pid
				}).then(res => {
					this.groupList = res;
				});
			},
			toRoom(groupID, groupName) {
				const conversationID = 'GROUP' + groupID;
				timStore.commit("timStore/setConversationID", conversationID);
				//uni.$TUIKit.TUIChatServer.updateStore(value.conversationID)
				uni.navigateTo({
					url: `/pages/TUIKit/TUIPages/TUIChat/index?conversationName=${groupName}&conversationId=${groupID}&pid=${this.pid}`,
				});
				uni.$TUIKit.TUIConversationServer.setMessageRead(conversationID);
				uni.$TUIKit.TUIConversationServer.getConversationProfile(
					conversationID
				).then(res => {
					// 通知 TUIChat 关闭当前会话
					timStore.commit("timStore/setConversation", res.data.conversation);
					// uni.$TUIKit.getStore()['TUIChat'].conversation = res.data.conversation;
				});
			},
			handleTouchMove(e) {
				if (!this.lock) {
					this.last = e.detail.x;
					this.lock = true;
				}

				if (this.lock && e.detail.x - this.last < -5) {
					this.setData({
						xScale: -75
					});
					setTimeout(() => {
						this.lock = false;
					}, 2000);
				} else if (this.lock && e.detail.x - this.last > 5) {
					this.setData({
						xScale: 0
					});
					setTimeout(() => {
						this.lock = false;
					}, 2000);
				}
			},
			handleImageError(index) {
				this.groupList[index].GroupAvatar = '/static/static/assets/gruopavatar.svg';
			},
			//下拉刷新列表
			handleRefresh() {
				this.getGroupList()
				if(!this.isRefreshed) {
					this.isRefreshed = true
					setTimeout(()=> {
						this.isRefreshed = false
					},1500)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./index.css";
	.note {
		padding-bottom: 148rpx;
	}

	.note-section {
		margin-bottom: 24rpx;
	}

	.note-item {
		background-color: #fff;
		height: 106rpx;
		padding: 0 24rpx 0 18rpx;

		&_avatar {
			position: relative;
			margin-right: 24rpx;
		}

		&_content {
			height: 100%;
			display: flex;
			justify-content: center;
			flex-direction: column;

			&--name {
				font-size: 32rpx;
			}

			&--text {
				font-size: 24rpx;
				color: #949C9E;
			}
		}

		&_time {
			font-size: 24rpx;
			height: 76rpx;
			color: #949C9E;
		}
	}

	.note-footer {
		z-index: 999;
		position: fixed;
		bottom: 20rpx;
		width: 100%;
		background-color: #fff;
		padding:20rpx 140rpx;
	}
</style>
